<template>
  <view class="page">
    <view class="goods-box" v-for="(item, index) in goodsList" :key="item.id">
      <view class="flex">
        <u-image :src="domain + item.image" radius="9" height="65" width="65" />
        <view class="content">
          <u-text
            :text="item.title || '-'"
            color="#222"
            size="16"
            lines="1"
            line-height="30"
          />
          <u-text
            :text="item.difference || '-'"
            color="#666"
            size="14"
            lines="1"
            line-height="30"
          />
        </view>
      </view>
      <view class="flex">
        <view class="title">宝贝评价</view>
        <view class="content flex">
          <u-icon
            :name="item.state == 0 ? 'thumb-up-fill' : 'thumb-up'"
            size="20"
            :color="item.state == 0 ? '#ff4e02' : '#c3c2ca'"
            :label-color="item.state == 0 ? '#ff4e02' : '#c3c2ca'"
            label="好评"
            @tap="stateType(0, index)"
          />
          <u-icon
            :name="item.state == 1 ? 'thumb-down-fill' : 'thumb-down'"
            size="20"
            :color="item.state == 1 ? '#ff4e02' : '#c3c2ca'"
            :label-color="item.state == 1 ? '#ff4e02' : '#c3c2ca'"
            label="中评"
            @tap="stateType(1, index)"
          />
          <u-icon
            :name="item.state == 2 ? 'thumb-down-fill' : 'thumb-down'"
            size="20"
            :color="item.state == 2 ? '#ff4e02' : '#c3c2ca'"
            :label-color="item.state == 2 ? '#ff4e02' : '#c3c2ca'"
            label="差评"
            @tap="stateType(2, index)"
          />
        </view>
      </view>
      <view style="margin-top: 20rpx">
        <u-textarea v-model="item.comment" placeholder="评价下商品~" border="none" />
      </view>
      <view style="margin-top: 20rpx">
        <u-upload
          :file-list="item.imgList"
          @after-read="
            (e) => {
              afterRead(e, index);
            }
          "
          @delete="
            (e) => {
              deletePic(e, index);
            }
          "
          name="images"
          multiple
          :max-count="4"
        />
      </view>
    </view>

    <view class="goods-box" v-if="shop.shopname">
      <u-text
        @click="onShop(shop.id)"
        color="#222"
        size="14"
        line-height="40"
        :text="shop.shopname"
      />
      <view class="flex">
        <view class="title">描述相符</view>
        <u-rate
          v-model="shop.describe"
          :count="5"
          size="25"
          active-color="#ff4e02"
          inactive-color="#cad0cc"
          @change="describeChange"
        />
        <view class="gray">
          {{ shop.describeInfo }}
        </view>
      </view>
      <view class="flex">
        <view class="title">物流服务</view>
        <u-rate
          v-model="shop.logistics"
          :count="5"
          size="25"
          active-color="#ff4e02"
          inactive-color="#cad0cc"
          @change="logisticsChange"
        />
        <view class="gray">
          {{ shop.logisticsInfo }}
        </view>
      </view>
      <view class="flex">
        <view class="title">发货速度</view>
        <u-rate
          v-model="shop.service"
          :count="5"
          size="25"
          active-color="#ff4e02"
          inactive-color="#cad0cc"
          @change="serviceChange"
        />
        <view class="gray">
          {{ shop.serviceInfo }}
        </view>
      </view>
      <view class="flex">
        <view class="title">服务态度</view>
        <u-rate
          v-model="shop.deliver"
          :count="5"
          size="25"
          active-color="#ff4e02"
          inactive-color="#cad0cc"
          @change="deliverChange"
        />
        <view class="gray">
          {{ shop.deliverInfo }}
        </view>
      </view>
    </view>

    <view class="btn">
      <u-button
        type="primary"
        shape="circle"
        text="发布评论"
        :throttle-time="1000"
        @click="handleSubmit"
      />
    </view>
  </view>
</template>
<script>
import config from "@/request/baseUrl.js";
import { commonUpload } from "@/request/common.js";
import { myGoodsOrderDetail, myCommentOrder } from "@/request/myApi.js";
export default {
  data() {
    return {
      domain: config.baseUrl,
      orderId: 0, // 订单ID
      goodsList: [], // 商品列表
      shop: {
        id: 0,
        shopname: "",
        describe: 0,
        describeInfo: "",
        logistics: 0,
        logisticsInfo: "",
        service: 0,
        serviceInfo: "",
        deliver: 0,
        deliverInfo: "",
      },
    };
  },
  onLoad(e) {
    this.orderId = e.id;
    this.getData();
  },
  methods: {
    // 获取商品详情
    getData() {
      myGoodsOrderDetail(this.orderId).then((res) => {
        if (res.code == 1) {
          this.shop.id = res.data.shop_id;
          this.shop.shopname = res.data.shop.shopname;
          let newItems = [];
          res.data.goods.forEach((item) => {
            newItems.push({
              id: item.id,
              goods_id: item.goods_id,
              difference: item.difference,
              image: item.image,
              title: item.title,
              imgList: [],
              comment: "",
              state: 0,
            });
          });
          this.goodsList = newItems;
        }
      });
    },
    // 提交评论
    handleSubmit() {
      if (
        this.shop.describe == 0 ||
        this.shop.logistics == 0 ||
        this.shop.service == 0 ||
        this.shop.deliver == 0
      ) {
        uni.showToast({
          title: "请给店铺评分",
          icon: "none",
        });
        return false;
      }
      let list = this.goodsList.map((i) => {
        i.imgList = i.imgList.map((a) => {
          return a.url;
        });
        return i;
      });
      let data = {
        order_id: this.orderId,
        shop: {
          id: this.shop.id,
          describe: this.shop.describe,
          logistics: this.shop.logistics,
          service: this.shop.service,
          deliver: this.shop.deliver,
        },
        goodsList: list,
      };
      myCommentOrder(data).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: "评论成功",
            icon: "success",
            mask: true,
            success: () => {
              setTimeout(() => {
                this.$prePage().getDataList();
                uni.navigateBack({ delta: 1 });
              }, 1500);
            },
          });
        }
      });
    },
    stateType(type, index) {
      this.goodsList[index].state = type;
    },
    // 删除图片
    deletePic(e, index) {
      this.goodsList[index].imgList.splice(e.index, 1);
    },
    // 新增图片
    async afterRead(e, index) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let list = [].concat(e.file);
      let len = this.goodsList[index].imgList.length;
      list.map((item) => {
        this.goodsList[index].imgList.push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < list.length; i++) {
        const result = await this.uploadFilePromise(list[i].url);
        let item = this.goodsList[index].imgList[len];
        this.goodsList[index].imgList.splice(
          len,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        len++;
      }
    },
    // 上传凭证图片
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        commonUpload(url).then((res) => {
          if (res.code == 1) {
            setTimeout(() => {
              resolve(res.data.fullurl);
            }, 1000);
          }
        });
      });
    },
    // 描述相符
    describeChange(e) {
      console.log(e);
      this.shop.describe = e;
      this.shop.describeInfo = this.scoreInfo(e);
    },
    // 物流服务
    logisticsChange(e) {
      this.shop.logistics = e;
      this.shop.logisticsInfo = this.scoreInfo(e);
    },
    // 发货速度
    serviceChange(e) {
      this.shop.service = e;
      this.shop.serviceInfo = this.scoreInfo(e);
    },
    // 服务态度
    deliverChange(e) {
      this.shop.deliver = e;
      this.shop.deliverInfo = this.scoreInfo(e);
    },
    // 中文评分
    scoreInfo(index) {
      if (index == 1) {
        return "极差";
      } else if (index == 2) {
        return "差";
      } else if (index == 3) {
        return "一般";
      } else if (index == 4) {
        return "好";
      } else if (index == 5) {
        return "极好";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  min-height: calc(100vh - 40rpx);
  background-color: #f7f7f7;
  .goods-box {
    color: #222222;
    border-radius: 18rpx;
    overflow: hidden;
    font-size: 28rpx;
    background-color: #ffffff;
    padding: 20rpx;
    margin-bottom: 20rpx;
  }
  .btn {
    position: fixed;
    bottom: 100rpx;
    left: 30rpx;
    right: 30rpx;
  }
}
.flex {
  display: flex;
  align-items: center;
  min-height: 80rpx;
  .title {
    width: 140rpx;
    font-size: 28rpx;
    color: #666666;
  }
  .content {
    flex: 1;
    margin-left: 20rpx;
    justify-content: space-around;
  }
}
.gray {
  font-size: 28rpx;
  color: #999;
}
::v-deep .u-textarea {
  background-color: #fafafa !important;
}
</style>
